<template>
  <div class='goods-box'>
    <div class='goods-category'>
      <div class='category-left'>
        <div class='category-left-floor'>{{data.index}}F</div>
        <div class='name'>{{data.floor}}</div>
      </div>
      <div class='category-center'>
        <div class='line_1'></div>
        <div class='line_name'>{{data.name}}</div>
        <div class='line_2'></div>
      </div>
    </div>
    <div class='goods-info'>
      <div class='goods-content' v-for='goods in data.list' :key='goods.id'>
        <!-- <img :src='goods.imgUrl' /> -->
        <img src='../../../../assets/list.png' alt @click='go_detail()' />
        <div class='goods-box-title'>{{ goods.title }}</div>
        <div class='goods-box-detail'>{{ goods.detail }}</div>
        <div class='goods-box-price'>￥{{ goods.price }}</div>
      </div>
    </div>
  </div>
</template>

<style>
.goods-box {
  width: 100%;
  background: #fff;
  margin: 10px auto 0;
}
.goods-box .goods-category {
  padding: 16px 10px;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  align-items: center;
}
.goods-category .category-left .category-left-floor {
  width: 45px;
  height: 45px;
  background: #f10215;
  border-radius: 50%;
  text-align: center;
  line-height: 45px;
  color: #fff;
  font-size: 22px;
  font-weight: bolder;
}
.goods-category .category-left {
  display: flex;
}
.goods-category .category-left .name {
  color: #222;
  font-size: 25px;
  font-weight: 700;
  margin-left: 10px;
  line-height: 45px;
}
.goods-category .category-center {
  display: flex;
}
.goods-category .category-center .line_1 {
  width: 50px;
  height: 3px;
  background: #222;
  margin: 20px 20px 0px 460px;
}
.goods-category .category-center .line_2 {
  width: 50px;
  height: 3px;
  background: #222;
  margin: 20px 0px 0px 20px;
}
.goods-category .category-center .line_name {
  color: #222;
  font-size: 24px;
  font-weight: bold;
  line-height: 45px;
}
.goods-box .goods-info {
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  background: #fff;
}
.goods-info .goods-content {
  width: 239px;
  border-bottom: 1px solid #f4f4f4;
  border-right: 1px solid #f4f4f4;
}
.goods-info .goods-content img {
  width: 200px;
  height: 200px;
  padding: 10px 20px 0 20px;
  cursor: pointer;
}
.goods-info .goods-content .goods-box-title {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  padding: 0px 20px;
}
.goods-info .goods-content .goods-box-detail {
  color: #666;
  font-size: 13px;
  padding: 0px 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
}
.goods-info .goods-content .goods-box-price {
  color: #f40;
  font-size: 20px;
  padding: 8px 20px;
}
</style>
<script src="./goods.js"></script>